<template>
	<view class="body">
		<view class="header">
			<view class="text1" v-bind:class="{ text2: isActive4 }" @click="xuanzhefour">
				<view>当前状态</view>
			</view>
			<view class="text1" v-bind:class="{ text3: isActive5 }" @click="xuanzhefive">
				<view>巡检记录</view>
			</view>
		</view>
		<!-- 当前状态 -->
		<view class="content" v-if="xianshi=='1'">
			<image class="size" :src="img"></image>
			<view class="list">
				<text class="title">设备名称</text>
				<text class="xqtext">{{name}}</text>
			</view>
			<view class="list">
				<text class="title">设备图纸</text>
				<text class="xqtext" style="width: 53%;">电气原理图</text>
				<view @click="yuantu(id)" class="lable">
					<text>查看</text>
					<image class="imgicon" src="../../static/img/more.png"></image>
				</view>
			</view>
			<view class="list">
				<text class="title">设备所属</text>
				<text class="xqtext">{{nickname}}</text>
			</view>
			<view class="list">
				<text class="title">设备级别</text>
				<view class="xqtext" v-if="type=='1'">
				    <view>一级</view>
				</view>
				<view class="xqtext" v-if="type=='2'">
				    <view>二级</view>
				</view>
				<view class="xqtext" v-if="type=='3'">
				    <view>三级</view>
				</view>
			</view>
			<view class="list">
				<text class="title">设备位置</text>
				<text class="xqtext">{{location}}</text>
			</view>
			<view class="list">
				<text class="title">当前状态</text>
				<view class="textone" v-if="status=='1'">
					<view class="tubiao1"></view>
					<view class="normal">正常</view>
				</view>
				<view class="textone" v-if="status=='2'">
					<view class="tubiao3"></view>
				    <view class="abnormal">异常</view>
				</view>
				<view class="textone" v-if="status=='3'">
					<view class="tubiao5"></view>
				    <view class="fault">故障</view>
				</view>
			</view>
			<view class="list">
				<text class="title">巡检人员</text>
				<text class="xqtext">{{cname}}</text>
			</view>
			<view class="list">
				<text class="title">巡检时间</text>
				<text class="xqtext">{{ctime}}</text>
			</view>
			<view class="list">
				<text class="title">情况描述</text>
				<text v-if="status!='1'" class="xqtext">{{cdetail}}</text>
				<text v-if="status=='1'" class="xqtext">无</text>
			</view>
			<view class="list">
				<text class="title">故障图片</text>
			</view>
			<view class="list" v-if="status!='1'">
				<view @click="bigimg1"><image class="faultimg" :src="cimg1"></image></view>
				<view @click="bigimg2"><image class="faultimg" :src="cimg2"></image></view>
				<view @click="bigimg3"><image class="faultimg" :src="cimg3"></image></view>
			</view>
			<view class="list" v-if="status=='1'">
				<text class="tsize">无</text>
			</view>
		</view>
		<!-- 巡检记录 -->
		<view v-if="xianshi=='2'">
			<view class="heand">
				<image class="imgsize" src="../../static/img/riqi.png"></image>
				<text class="riqitext">请选择日期</text>
				<image class="qiantou" src="../../static/img/more.png"></image>
			</view>
			<view @click="tiaozhuan(item.id)" class="content" v-for="(item,index) in record" :key="index">
				<view class="sample">{{name}}
				   <view v-if="item.status=='1'" class="tubiao1" style="margin-left: 57%;"></view>
				   <view v-if="item.status=='2'" class="tubiao3" style="margin-left: 57%;"></view>
				   <view v-if="item.status=='3'" class="tubiao5" style="margin-left: 57%;"></view>
				   <view v-if="item.status=='2'" class="abnormal">异常</view>
				   <view v-if="item.status=='1'" class="normal">正常</view>
				   <view v-if="item.status=='3'" class="fault">故障</view>
				</view>
				<view class="people">
					<view class="name">巡检人：<p>{{item.nickname}}</p></view>
					<view class="data">{{item.createtime}}</view>
				</view>
			</view>
		</view>
		<view @click="add" class="footer" v-if="xianshi=='1'">
			<button class="footbutton">添加记录</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id:'',
				isActive4:true,
				isActive5:'',
				xianshi:1,
				name:'',
				nickname:'',
				location:'',
				record:'',
				img:'',
				dimg:'',
				cimg1:'',
				cimg2:'',
				cimg3:'',
				cdetail:'',
				status:'',
				style:'',
				type:'',
				type1:'',
				ctime:'',
				createtime:'',
				cname:''
			};
		},
		methods: {
			tiaozhuan (id) {
				uni.navigateTo({
					url:'/pages/status/status?id=' + id
				})
			},
			yuantu (id) {
				uni.navigateTo({
					url:'/pages/drawing/drawing?id=' + id
				})
			},
			bigimg1 () {
				uni.navigateTo({
					url:'/pages/bigimg/bigimg?id=' + this.id
				})
			},
			bigimg2 () {
				uni.navigateTo({
					url:'/pages/bigimg2/bigimg2?id=' + this.id
				})
			},
			bigimg3 () {
				uni.navigateTo({
					url:'/pages/bigimg3/bigimg3?id=' + this.id
				})
			},
			getData () {
				uni.request({
					url:'http://xj.gccrw.cn/api/app/xundetail',
					data:{
						id:this.id
					},
					method:'POST',
					success: (e) => {
						this.id = e.data.data.data.id;
						this.name = e.data.data.data.name;
						this.cname = e.data.data.data.cname;
						this.createtime = e.data.data.data.createtime;
						this.nickname = e.data.data.data.nickname;
						this.location = e.data.data.data.location;
						this.img = e.data.data.data.img;
						this.dimg = e.data.data.data.dimg;
						this.cdetail = e.data.data.data.cdetail;
						this.status = e.data.data.data.status;
						this.type = e.data.data.data.type;
						this.type1 = e.data.data.data.type1;
						this.ctime = e.data.data.data.ctime;
						this.qr = e.data.data.data.qr;
						this.record = e.data.data.record;
						this.cimg1 = e.data.data.data.cimg1;
						this.cimg2 = e.data.data.data.cimg2;
						this.cimg3 = e.data.data.data.cimg3;
					},
					fail:() => {
						uni.showToast({
							icon:'none',
							title:'请连接网络'
						})
					}
				})
			},
			xuanzhefour () {
				uni.request({
					url:'http://xj.gccrw.cn/api/app/xundetail',
					data:{
						id:this.id
					},
					method:'POST',
					success: (e) => {
						this.isActive4 = true;
						this.isActive5 = false;
						this.xianshi = 1
					} 
				})
			},
			xuanzhefive () {
				uni.request({
					url:'http://xj.gccrw.cn/api/app/xundetail',
					data:{
						id:this.id
					},
					method:'POST',
					success: (e) => {
						this.isActive5 = true;
						this.isActive4 = false;
						this.xianshi = 2;
					} 
				})
			},
			add () {
				uni.navigateTo({
					url:'/pages/main/main?id=' + this.id
				})
			}
		},
		onLoad (e) {
			console.log('-----123',e.id);
			this.id = e.id
		},
		onShow () {
			this.getData()
		}
	}
</script>

<style>
	.header {
		width: 70%;
		border-radius: 10upx;
		display: flex;
		background-color: #FFFFFF;
		margin-left: 125upx;
		margin-top: 30upx;
	}
	.textone {
		margin-left: 40upx;
		font-size: 40upx;
		display: flex;
		align-items: center;
	}
	.tsize {
		font-size: 18px;
		margin: 20upx;
		color: #999999;
	}
	.text1 {
		width: 50%;
		text-align: center;
		padding: 20upx;
		color: #3C6DD2;
	}
	.text2 {
		width: 50%;
		text-align: center;
		padding: 20upx;
		color: #FFFFFF;
		background-color: #3C6DD2;
		border-radius: 10upx 0upx 0upx 10upx;
	}
	.text3 {
		width: 50%;
		text-align: center;
		padding: 20upx;
		color: #FFFFFF;
		background-color: #3C6DD2;
		border-radius: 0upx 10upx 10upx 0upx;
	}
	.size {
		border-radius: 20upx;
		width: 100%;
		height: 350upx;
	}
	.heandtext {
		width: 50%;
		text-align: center;
		padding: 10upx;
		color: #3C6DD2;
	}
	.heandtexttwo {
		width: 50%;
		text-align: center;
		padding: 10upx;
		color: #FFFFFF;
		background-color: #3C6DD2;
		border-radius: 10upx;
	}
	.list {
		margin: 10upx;
		display: flex;
	}
	.faultimg { 
		width: 120upx;
		height: 120upx;
		margin: 20upx;
		border-radius: 20upx;
	}
	.title {
		color: #999999;
		font-size: 40upx;
		width: 25%;
	}
	.xqtext {
		margin-left: 40upx;
		font-size: 40upx;
		width: 70%;
	}
	.lable {
		color: #999999;
		font-size: 30upx;
		display: flex;
		align-items: center;
		/* margin-left: 226upx; */
	}
	.imgicon {
		width: 18upx;
		height: 25upx;
		margin-top: 2upx;
		padding: 2upx;
	}
	.sample {
		color: #333333;
		font-size: 32upx;
		display: flex;
		padding: 23upx;
		border-bottom: 2upx solid #CCCCCC;
	}
	.people {
		display: flex;
		font-size: 32upx;
		justify-content: space-between;
		padding: 23upx;
	}
	.name {
		color: #999999;
		display: flex;
	}
	.name p {
		color: #333333;
	}
	.data {
		color: #333333;
		font-size: 32upx;
	}
	
	/* 巡检详情 */
	.heand {
		width: 100%;
		display: flex;
		align-items: center;
		margin-top: 30upx;
		margin-left: 3%;
	}
	.imgsize {
		width: 40upx;
		height: 40upx;
	}
	.riqitext {
		font-size: 30upx;
		color: #333333;
		margin-left: 20upx;
		padding-left: 7upx;
		/* border-left: 6upx solid #3C6DD2; */
	}
	.riqitext1 {
		font-size: 30upx;
		color: #333333;
		margin-left: 52%;
		
	}
	.qiantou {
		width: 18upx;
		height: 25upx;
		margin-left: 62%;
	}
	.imgicon {
		width: 18upx;
		height: 25upx;
		margin-top: 2upx;
		padding: 2upx;
	}
	.footer{
		width: 100%;
	}
	.footbutton {
		color: #FFFFFF;
		background-color: #3C6DD2;
	}
</style>
